<template>
  <div ref="chartRef" class="chart-wrap"></div>
</template>

<script setup lang="ts">
  import { ref, onMounted, watch, onUnmounted } from 'vue';
  import * as echarts from 'echarts';
  const props = defineProps({
    averageScore: {
      type: Number,
      default: 0,
    },
    listData: {
      type: Array,
      default: () => [],
    },
    radarData: {
      type: Object,
      default: () => {
        return {
          orderCalculationScore: 0,
          structureCalculationScore: 0,
          speedCalculationScore: 0,
          strengthCalculationScore: 0,
          strokeCalculationScore: 0,
          countCalculationScore: 0,
        }
      },
    },
    chartName: {
      type: String,
      default: '',
    },
    layRenderTime: {
      type: Number,
      default: 0,
    },
    isWhite: {
      type: Boolean,
      default: false,
    }
  });
  watch(
    () => props.averageScore,
    () => {
      console.log('分数更新， 雷达图')
      getChartData();
    }
  );
  const chartRef = ref();
  let myChart: any = null;
  const chartData = ref<any[]>([]);
  const getChartData = async () => {
    // chartData.value = [
    //   props.radarData.orderCalculationScore,
    //   props.radarData.structureCalculationScore,
    //   props.radarData.speedCalculationScore,
    //   props.radarData.strengthCalculationScore,
    //   props.radarData.strokeCalculationScore,
    //   props.radarData.countCalculationScore,
    // ];
    chartData.value = props.listData;
    initChart();
  };
  onMounted(async () => {
    await getChartData();
  });
  onUnmounted(async () => {
    myChart?.clear();
  });
  const initChart = () => {
    myChart = echarts.init(chartRef.value);
    const option = {
      color: props.isWhite ? ['#fff'] : ['#EB6100'],
      grid: {
        left: 0,
        right: 0,
        bottom: 20,
        top: 20,
      },
      radar: {
        radius: '75%',
        nameGap: 5,
        indicator: [
          { name: '笔顺', max: 100 },
          { name: '结构', max: 100 },
          { name: '速度', max: 100 },
          { name: '力度', max: 100 },
          { name: '笔画', max: 100 },
          { name: '笔数', max: 100 },
        ],
        splitArea: {
          areaStyle: {
            color: 'transparent',
          }
        },
        axisName: {
          color: props.isWhite ? '#fff' : '#9BA2AA',
        },
        axisLine: {
          lineStyle: {
            color: props.isWhite ? 'rgba(255,255,255,0.4)' : '#DCE0E5',
          }
        },
        splitLine: {
          lineStyle: {
            color: props.isWhite ? 'rgba(255,255,255,0.4)' : '#DCE0E5',
          }
        }
      },
      series: [
        {
          type: 'radar',
          data: [
            {
              symbol: 'none',
              value: chartData.value,
              areaStyle: {
                color: props.isWhite ? 'transparent' : new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                  {
                    color: 'rgba(255, 145, 124, 0.1)',
                    offset: 0,
                  },
                  {
                    color: '#EB6100',
                    offset: 1,
                  },
                ]),
              },
            },
          ],
        },
      ],
    };
    myChart.setOption(option, true);
  };
</script>

<style scoped lang="less">
  .chart-wrap {
    height: 100%;
  }
</style>
